<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 父组件，可以在引用子组件的时候，通过属性绑定（v-bind）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
			<mycom1 :parentmsg="msg"></mycom1>
		</div>
		<template id="tmp1">
			<div>
				<p @click="change2">这是子组件-------{{title}}</p>
				<h3 @click="change">{{parentmsg}}</h3>
			</div>
		</template>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '这是父组件的data数据'
				},
				methods: {},
				components: {
					//结论：子组件中默认无法访问到父组件中data上的数据和methods中的方法
					mycom1: {
						data: function() {
							//注意：子组件中的数据，并不是通过父组件传递过来的，二十子组件自身私有的
							//可读，可写
							return {
								title: '子组件的data数据'
							}
						},
						template: '#tmp1',
						//注意：组件中的 所有props中的数据，都是通过父组件传递给子组件的
						//props中的数据都是只读的，无法重新赋值
						props: ['parentmsg'], //把父组件传递过来的parentmsg属性，现在props数组中定义一下，这样才能使用这个数据
						methods: {
							change() {
								this.parentmsg = '被修改了' //这样会报错
							},
							change2() {
								this.title = '被修改了'
							}
						}
					}
				}
			})
		</script>
	</body>
</html>
